<template>
	<div class="main">
		<div class="mgt"></div>
		<van-search v-model="keyword" :clearable="false" placeholder="  搜索">
			<template #left-icon><van-icon/></template>
			<template #right-icon>
				<img :src="serchicon" class="searchicon" @click="JumptoSearch" alt="">
			</template>
		</van-search>
		<!-- 搜索框 -->
			
		<div class="fullscroll">
			<swipe :bannerArr="bannerdata" v-if="bannerdata.length>0"/>
			<!-- 轮播图 -->
			
			<activityclass :activityData="activityArr"/>
			<!-- banner -->

			<!-- <img class="adpic" src="../../assets/redpack/togetredpack.png" alt=""> -->
			<!-- 延时加载 -->
			<!-- <div class="blackbg ad-animation" v-if="showAD"></div>
			<div class="adpic ad-animation" v-if="showAD">
				<div class="close-adpic" @click="CloseAD"></div>
				<div class="toget" @click="gotoAD"></div>
			</div> -->
			

			<van-row>
				<div class="goods-title-icon">
					<div class="goods-title-field">
						<div class="goods-title-hr" />
					</div>
					<div class="goods-title-icon-field">
						<div><img src="../../assets/img/jingpin.png" class="goods-title-icon-field-img" alt=""></div>
					</div>
					<div class="goods-title-field">
						<div class="goods-title-hr" />
					</div>
				</div>
				<div class="goods-title">至臻潮品</div>
			</van-row>
			<!-- 商品标题 -->
			
			<van-row>
				<van-list
					v-model="toloading"
					:finished="finished"
					finished-text="没有更多了" :offset="10"
					@load="onLoad">
					<div class="goot-list">
						<div class="good-item" v-for="(item,index) in goodListArr" :key="index" @click="JumpDetails(item.goods_id)">
							<span class="good-item-title">{{item.brand}}</span>
							<div class="good-item-img" :style="{background:`url(${item.image})`}"></div>
							<span class="good-name">{{item.series}}</span>
							<span class="good-admin-pay">官方售价:<span class="good-admin-pay-item"><img class="" src="../../assets/img/payblack.png" alt="">{{item.market_price}}</span></span>
							<span class="good-go-pay">GO价: <span class="good-go-pay-item"><img class="" src="../../assets/img/payred.png" alt="">{{item.price}}</span></span>
						</div>
					</div>
				</van-list>
			</van-row>
			<!-- 商品 -->
			
			<menubtn ref="menuredbtn"/>
			
			<!-- <img class="callbackxxx" src="../../assets/img/backtop.png" v-if="btnFlag" @click="backtop" alt=""> -->
			
			<a-back-top>
				<img class="callbackxxx" src="../../assets/img/backtop.png" alt="">
    		</a-back-top>
		</div>
	</div>
</template>

<script>
import {_getWxLogin,_WeChatLogin,_getjsapiticket} from '../../service/wxService.js'
import {_receiveCoupon} from '../../service/coupon'
import {_ajaxBanner,_ajaxCate,_ajaxGoods} from '../../service/main.js'
import swipe from "../../components/swipe.vue"
import menubtn from "../../components/menubtn.vue"
// import goodslist from '../../components/goodslist.vue'
import activityclass from '../../components/ActivityClass.vue'
import {_getSharePic} from '../../service/main'
	export default{
		name:"index",
		data(){
			return{
				serchicon:require('../../assets/img/searchicon.png'),
				showAD:false,
				keyword:"",
				bannerdata:[],
				activityArr:[],
				goodListArr:[],
				toloading:false,
				finished:false,
				page:1,
				btnFlag:false,
				wxcimss:"",
				scrollTop:0,
				timerId:'',
			}
		},
		components:{
			swipe,
			menubtn,
			// goodslist,
			activityclass
		},
		created(){
			if(localStorage.getItem("showAD")!=null&&localStorage.getItem("showAD")!=undefined){
				let data=localStorage.getItem("showAD")
				if(data=="isshow"){
					this.showAD=false
				}else{
					setTimeout(()=>{
						this.showAD=true
					},1000)
				}
				
			}else{
				setTimeout(()=>{
					this.showAD=true
				},1000)
			}
			this.getbanner()//获取轮播图
			this.getactivity()//获取活动分类
			if(true){
				this.getgoodslist()//获取商品列表
			}
			this.getWxCode()//获取微信登录授权
			// if(!localStorage.getItem("WXjsapi_ticket")){
			// 	this.getWxjsapi()
			// }
			try{
				this.UpdateShareDate()
			}catch(e){

			}
		},
		activated(){
			this.finished=false
			window.onscroll = this.justifyPos
		},
		methods:{
			async UpdateShareDate(){
				let _this=this
				let localhref=window.location.href

				let conf1,conf2

				await _getSharePic({id:2}).then(res=>{
					conf1={ 
						title: "HALF GO", // 分享标题
						desc: "更多折惠，极致享受，千款商品，邀您畅购......", // 分享描述
						link: localhref, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						imgUrl: `http://www.starrymedia.vip${res.data.path}`, // 分享图标
					}

					conf2={ 
						title: "HALF GO", // 分享标题
						link: localhref, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						imgUrl: `http://www.starrymedia.vip${res.data.path}`, // 分享图标
					}
				})


				await _getjsapiticket(localhref).then(res=>{
					console.log("_getjsapiticket",res)
					if(res.errcode==1){
						// localStorage.setItem("WXjsapi_ticket",JSON.stringify(res.data))
						wx.config({
							debug: false, 
							appId: res.data.appid, // 必填，公众号的唯一标识
							timestamp: res.data.timestamp, // 必填，生成签名的时间戳
							nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
							signature: res.data.signature,// 必填，签名，见附录1
							jsApiList: [
								"updateAppMessageShareData","onMenuShareAppMessage",
								"updateTimelineShareData","onMenuShareWeibo"
							]
						});
						setTimeout(()=>{
							wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
								wx.updateAppMessageShareData(conf1)
								wx.updateTimelineShareData(conf2)
								wx.onMenuShareWeibo(conf1);
							});
							wx.error(function(res){
								// alert(JSON.stringify(res))
							});
						},400)
					}
				})
				
				
			},

			CloseAD(){
				this.showAD=false
				// localStorage.setItem("showAD","isshow")
			},
			gotoAD(){
				// this.$router.push("/getcou")
				if(localStorage.getItem("user")==null||localStorage.getItem("user")==undefined){
					this.$toast("请先登录")
					this.$router.push("/login")
					return
				}
				let _this=this
				let uid=JSON.parse(localStorage.getItem("user")).user_id
				_receiveCoupon({
					coupon_id:1,
					user_id:uid
				}).then(res=>{
					console.log(res)
					if(res.errcode==1){
						this.$toast("领取成功")
						localStorage.setItem("showAD","isshow")
						this.showAD=false
						_this.$router.push("/myCoupon")
					}else{
						this.$toast(res.message)
					}
				})
				
			},
			justifyPos () {
				// 节流；
				if (this.timerId) clearTimeout(this.timerId)
				this.timerId = setTimeout(() => {
					// 获取页面滚动距离之后设置给当前路由的 元信息
					this.$route.meta.y = window.pageYOffset
				}, 300)
			},
			getWxCode(){
				let _this=this
				let uri=window.location.href
				return

				let param,code
				
				if(uri.indexOf("code")==-1){
					if(localStorage.getItem("WxCode")!=null||localStorage.getItem("WxCode")!=undefined){
						let logdate=localStorage.getItem("WxCode")
						let thistime=new Date().getTime()
						
						if(thistime-logdate.time>24*60*60*1000){//如果登录信息时间超过一天，重新授权登录
							localStorage.removeItem("WxCode")//删除授权code
							localStorage.removeItem("WxUserInfo")
							_getWxLogin()
							
						}else{
							return
						}
					}else{
						_getWxLogin()
					}
				}
				
				
				param=new URLSearchParams(uri.split("?")[1])
				code=param.get("code")

				// let code="0012Uzsw05cH5d1tzQqw0z6Msw02Uzs5"
				console.log(code)
				_WeChatLogin({code:code}).then(res=>{
					console.log(res)
					alert(JSON.stringify(res))
					if(res.errcode==1&&res.message=="授权成功"){
						if(res.data.access_token){
							localStorage.setItem("WxUserInfo",JSON.stringify(res.data))
							let Obj={}
							Obj.code=code
							Obj.time=new Date().getTime();
							localStorage.setItem("WxCode",JSON.stringify(Obj))
						}else{
							// localStorage.removeItem("WxCode")//删除授权code
							// localStorage.removeItem("WxUserInfo")
							// _getWxLogin()
						}
					}else{
						// localStorage.removeItem("WxCode")//删除授权code
						// localStorage.removeItem("WxUserInfo")
						// _getWxLogin()
					}
				})
				
			},
			async getWxjsapi(){
				//用access_token获取jsapi_ticket
				// let _this=this
				// let access_token="http://market.starrymedia.vip/indexs"
				// JSON.parse(localStorage.getItem("WxUserInfo")).access_token
				// let uri=window.location.href
				// let param=new URLSearchParams(uri.split("?")[1])
				// let code=param.get("code")
				// await _WeChatLogin({code:code}).then(res=>{
				// 	console.log("_WeChatLogin",res)
				// 	if(res.errcode==1&&res.message=="授权成功"){
				// 		localStorage.setItem("WxUserInfo",JSON.stringify(res.data))
				// 		access_token=res.data.access_token
				// 	}else{
				// 		_this.$toast.fail("微信网页授权失败："+res.message);
				// 	}
				// })

				// await _getjsapiticket(access_token).then(res=>{
				// 	console.log("_getjsapiticket",res)
				// 	if(res.errcode==1){
				// 		localStorage.setItem("WXjsapi_ticket",JSON.stringify(res.data))
				// 		wx.config({
				// 			debug: true, 
				// 			appId: res.data.appid, // 必填，公众号的唯一标识
				// 			timestamp: res.data.timestamp, // 必填，生成签名的时间戳
				// 			nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
				// 			signature: res.data.signature,// 必填，签名，见附录1
				// 			jsApiList: [
				// 				"uploadImage","chooseImage","chooseWXPay","downloadImage"
				// 			]
				// 		});
				// 	}
				// })

				// wx.ready(function(){
				// 	alert("已完成微信登录")
				// });
			},
			JumptoSearch(){
				if(this.keyword!=""){
					this.$router.push({path:'/searchpage',query: {kw:this.keyword}})
				}else{
					this.$toast("请输入关键字")
				}
			},
			JumpDetails(id){
				this.$router.push({path:'/details',query: {id}})
			},
			getbanner(){
				let _this=this
				_ajaxBanner().then(res=>{
					_this.bannerdata=[]
					_this.bannerdata=[].concat(res.data)
				})
			},
			getactivity(){
				let _this=this
				_ajaxCate().then(res=>{
					_this.activityArr=[]
					_this.activityArr=[].concat(res.data)
				})
			},
			async getgoodslist(){
				let _this=this
				this.toloading=true
				await _ajaxGoods({page:this.page,pageNum:10}).then(res=>{
					if(res.data.length>0){
						_this.goodListArr.push(...res.data)
					}else{
						_this.finished=true
					}
				})
				this.page++
				this.toloading=false
			},
			onLoad(){
				let _this=this
				setTimeout(() => {
					_this.getgoodslist()
				}, 2000);
				console.log("onload")
			}
		}
	}
</script>

<style scoped>
.mian{
    min-height: 100%;
    width: 100%;
}
.blackbg{
	position: fixed;
	width: 100%;
	top: 0;
	bottom: 0;
	z-index: 998;
	background-color: rgba(0, 0, 0, 0.6);
}
.ad-animation{
	animation:fadeInWin ease .2s forwards ;
	-moz-animation:fadeInWin ease .2s forwards ; /* Firefox */
	-webkit-animation:fadeInWin ease .2s forwards ; /* Safari and Chrome */
	-o-animation:fadeInWin ease .2s forwards ; /* Opera */
}
@keyframes fadeInWin {
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}

.adpic{
	position: fixed;
	width: 100%;
	height: 259px;
	top: 32%;
	z-index: 999;
	background-image: url('../../assets/redpack/togetredpack.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
.close-adpic{
	width: 200px;
	height: 80px;
	float: right;
}
.toget{
	width: 100%;
	height: 100px;
	display: flex;
	align-items: flex-end;
	margin-top: 128px;
}
.van-search{
	background-color: #f2f2f2 !important;
	color: #333;
    caret-color:#333;
}
.van-search__content{
    background: #f8f8f8 !important;
	box-shadow: 1px 1px 2px rgba(204, 204, 204, .8);
	color: #333;
    caret-color:#333;
}
.van-field__left-icon {
    display: none !important;
}
.van-field__body{
	color: #333;
    caret-color:#333;
}
.searchicon{
    width: 18px;
    height: 18px;
}
.van-field__control{
	color: #333 !important;
    caret-color:#333 !important;
}

.van-field__control::placeholder{
    color: #999;
    font-family: "PingFang SC","Microsoft YaHei";
    font-size: 13px;
}
.van-field__control::-webkit-input-placeholder {
    color: #999;
    font-family: "PingFang SC","Microsoft YaHei";
    font-size: 13px;
}
.van-field__control::-moz-placeholder {
    color: #999;
    font-family: "PingFang SC","Microsoft YaHei";
    font-size: 13px;
}
.van-field__control::-ms-input-placeholder {
    color: #999;
    font-family: "PingFang SC","Microsoft YaHei";
    font-size: 13px;
}




.fullscroll{
    width: 100%;
    min-height: 95%;
}



/* .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
    background-color: #39a9ed;
}

.van-swipe-item{
    height: 144px;
    width: 360px;
    margin: 0 auto;
}
.van-swipe__indicators{
    display: none;
} */



.goods-title-icon{
    width: 340px;
    margin: 0 auto;
}
.goods-title-icon-field {
    width: 77px;
    display: inline-block;
    margin: 0 auto;
}
.goods-title-icon-field>div{
    width: 77px;
    height: 53px;
}
.goods-title-icon-field-img{
    display: block;
    width: 53px;
    margin: 0 auto;
}
.goods-title-field{
    display: inline-block;
    width: 131px;
    height: auto;
}
.goods-title{
    width: 100%;
    text-align: center;
    margin-left: 15px;
    letter-spacing: 32px;
    font-size: 13px;
	font-family: "PingFang SC","Microsoft YaHei";
	font-weight: bold;
    color: #666;
}
.goods-title-hr{
    width: 100%;
    display: block;
    margin: 0;
    height: 14px;
    border-top: .5px solid #ccc;
}





.goot-list{
    width: 360px;
    margin:26px auto 0 auto;
}
.good-item{
    width: 176px;
    height: 240px;
    display: inline-block;
    background-color: #fff;
    margin: 0 0 13px 0;
    box-shadow: 1px 1px 2px rgba(204, 204, 204, .8);
}
.good-item:nth-child(2n){
    float: right;
    margin: 0 0 13px 0;
}
.good-item>img{
    width: 100%;
}
.good-item-img{
    width: 120px;
    height: 70px;
    background-position-x: center !important;
    background-repeat: no-repeat !important;
    background-position-y: bottom !important;
    background-size: 90px 60px !important;
    margin: 12px auto 13px auto;
}
.good-item-title{
    display: block;
    width: 100%;
    text-align: center;
    color: #333;
    font-size: 18px;
    font-family: 'PingFang SC','Microsoft YaHei';
    margin-top: 28px;
}
.good-name{
    display: block;
    text-align: center;
    color: #999;
    font-size: 10px;
    font-family: 'DINPro Medium';
}
.good-admin-pay{
    display: block;
    text-align: center;
    color: #999;
    font-size: 11px;
    font-family: 'PingFang SC','Microsoft YaHei';
}
.good-admin-pay-item{
    display: inline-block;
    color: #999;
    font-size: 11px;
    font-family: 'DINPro Medium';
}
.good-admin-pay-item > img{
    width:7px ;
    margin: 0 3px 3px 3px;
}
.good-go-pay{
    display: block;
    text-align: center;
    font-size: 13px;
    color: #333333;
    font-family: 'PingFang SC','Microsoft YaHei';
    margin-top: 3px;
}
.good-go-pay-item{
    display: inline-block;
    font-size: 13px;
    color: #fb1f36;
    font-family: 'DINPro-Bold';
    margin-top: 4px;
}
.good-go-pay-item>img{
    width: 7px;
    margin: 0 3px 3px 3px;
}



.callbackxxx{
    position: fixed !important;
    bottom: 47px;
    right: 17px;
    width: 50px;
    height: 50px;
}
</style>
